import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import echarts from 'echarts'

class LeftBottomTU extends React.Component {

    constructor(props) {
        super(props)
        this.state={
            disList:{}
        }

    }


    componentWillReceiveProps() {
        
        setTimeout(() => {
            console.log(this.props)
            this.onsave()
        },1000)
      
    }
    onsave = () => {

        request({
            url: `/zhrq-web/patrol/patroltask/getFromData`,
            method: 'post',
            data:{...this.props}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    disList: data.ret.user
                })
            }
        })
    }
    
   
    
    setOption  = () => {
        let data = this.state.disList
        return {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                    color: '#7588E4',
                },
                extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
            },
            grid: {
                top: "10%",
                left: '3%',
                right: '0%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                right: 20,
                data: ['用户']
            },
            xAxis: {
                type: 'category',
                data:data.timeList,
                boundaryGap: false,
                splitLine: {
                    show: false,
                    interval: 'auto',
                    lineStyle: {
                        color: ['#D4DFF5']
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#000',
                    }
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 14
                    }
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: ['#D4DFF5']
                    }
                },
        
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 14
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#000',
                    }
                },
            },
            series: [{
                name: '用户',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                symbolSize: 6,
                data: data.data,
        
                itemStyle: {
                    normal: {
                        color: '#f7b851'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 3
                    }
                }
            },
            //  {
            //     name: '昨日',
            //     type: 'line',
            //     smooth: true,
            //     showSymbol: false,
            //     symbol: 'circle',
            //     symbolSize: 6,
            //     data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
        
            //     itemStyle: {
            //         normal: {
            //             color: '#58c8da'
            //         }
            //     },
            //     lineStyle: {
            //         normal: {
            //             width: 3
            //         }
            //     }
            // }
        ]
        };

        

    }

    render() {
      
        return (

                 <Chart option={this.setOption()} notMerge lazyUpdate style={{height:"27vh"}}
                 echartsInstance={this.save}
                 />
          

         
           
          );
    }
   
}

export default LeftBottomTU;
